<template>
  <div class="register">
    <div class="container">
      <div class="form">
        <div class="title">注册</div>
        <el-form
          :model="userInfo"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm formCon"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              type="test"
              v-model="userInfo.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input
              type="test"
              v-model="userInfo.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="userInfo.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="afreshPassword">
            <el-input
              type="password"
              v-model="afreshPassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="registerBtn"
              @click="userRigister(userInfo)"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from "../assets/request.js";
export default {
  name: "register",
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      const reg = /^\d{11}$/;
      if (!reg.test(value)) {
        return callback(new Error("手机号格不正确"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      const reg = /^\w{6,12}$/;
      if (value === "") {
        return callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        return callback(new Error("密码格式"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (this.afreshPassword !== this.userInfo.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userInfo: {
        name: "",
        phone: "",
        password: "",
      },
      afreshPassword: "",
      flag: false,
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        afreshPassword: [{ validator: validatePass2, trigger: "blur" }],
        name: [{ validator: checkName, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
      },
    };
  },
  methods: {
    afresh() {
      this.flag = !(this.afreshPassword === this.userInfo.password);
    },
    async userRigister(userInfo) {
      const resRigister = await register(userInfo);
      if (resRigister.status == 200) {
        this.$router.push({ name: "login" });
        this.$message({
          message: "恭喜你，成功注册",
          type: "success",
          duration: 800,
        });
      } else {
        this.$message({
          message: resRigister.data.msg,
          type: "success",
          duration: 800,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  padding: 100px 0;
  .container {
    .form {
      width: 500px;
      height: 400px;
      padding: 20px;
      margin: 0 auto;
      box-shadow: 0 5px 10px lightgray;
      .title {
        width: 100%;
        height: 50px;
        font-size: 20px;
        text-align: center;
      }
      .formCon {
        width: 500px;
        height: 350px;
        .registerBtn {
          width: 300px;
          height: 50px;
        }
      }
    }
  }
}
</style>
